<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="u-page">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <liu-swipe-action
            :btnList="btnList"
            ref="liuSwipeAction"
            :index="index"
            @clickItem="liuClickItem"
          >
            <u-cell>
              <view @click="editData(item,index)" slot="title" class="flex f-30 justify-between">
                <view class="flex-sb">
                  <view class="flex w-300 flex-aic">
                    <view class="w-120 c-99">{{ index + 1 }}. 幅宽 </view>
                    <text class=""
                      >{{ item.widthValue }}{{ item.widthUnitName }}</text
                    >
                  </view>

                  <view class="w-300 flex p-l-20">
                    <view class="w-80 c-99"> 克重 </view>
                    <text class=""
                      >{{ item.gramWeightValue
                      }}{{ item.gramWeightUnitName }}</text
                    >
                  </view>
                </view>
                <view v-if="item.isDefault"
                  ><u-badge :isDot="true" type="primary"></u-badge
                ></view>
              </view>
            </u-cell>
          </liu-swipe-action>
        </u-list-item>
        <view v-if="indexList.length === 0" class="m-t-p-50">
          <u-empty mode="list" text="暂无数据">
            <u-button
              class="empty-button"
              text="新增幅宽克重"
              type="primary"
              shape="circle"
              color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
              @click="clickBtn({ key: 'btn1' })"
            ></u-button>
            <view class="tip-view"> 可点击右上角：+进行快速建档案 </view>
          </u-empty>
        </view>
      </u-list>
    </view>
    <u-popup
      :show="expenseTypeShow"
      mode="center"
      :showCancelButton="true"
      confirmText="保存"
    >
      <view class="popup-view f-26">
        <view class="title">
          幅宽克重
          <view class="flex flex-aic pos-rt m-r-10 f-25"
            ><u-switch size="17" v-model="label.isDefault"></u-switch>默认</view
          >
        </view>
        <view class="form-view m-b-40">
          <view class="flex flex-aic m-b-20">
            幅宽
            <u--input
              v-model="label.widthValue"
              placeholder=""
              border="surround"
              class="inp-box m-l-10"
              customStyle="padding:0"
            >
            </u--input>
            <view
              class="text-gray-300 flex flex-aic b-all bor-ra w-130 flex-sb"
              @click.stop="
                lengthIndex = 0;
                lengthShow = true;
              "
              >{{ label.widthUnitName || "cm" }}
              <u-icon name="arrow-down" color="#D1D5DB" size="16"></u-icon>
            </view>
          </view>
          <view class="flex flex-aic">
            克重
            <u--input
              v-model="label.gramWeightValue"
              placeholder=""
              border="surround"
              class="inp-box m-l-10"
              customStyle="padding:0"
            >
            </u--input>
            <view
              class="text-gray-300 flex flex-aic b-all bor-ra w-130 flex-sb"
              @click.stop="
                lengthIndex = 1;
                lengthShow = true;
              "
              >{{ label.gramWeightUnitName || "cm" }}
              <u-icon name="arrow-down" color="#D1D5DB" size="16"></u-icon>
            </view>
          </view>

          <view class="flex flex-aic flex-sb m-t-20">
            <view class="flex flex-aic w-45p f-26">
              1公斤n米
              <u--input
                placeholder=""
                border="surround"
                class="inp-box m-l-10"
                v-model="label.kgMeter"
                customStyle="padding:0"
              >
              </u--input>
            </view>
            <view class="flex flex-aic w-45p f-26">
              1米n公斤
              <u--input
                placeholder=""
                border="surround"
                class="inp-box m-l-10"
                customStyle="padding:0"
                v-model="label.meterKg"
              >
              </u--input>
            </view>
          </view>
          <view class="flex flex-aic flex-sb m-t-20">
            <view class="flex flex-aic w-45p f-26">
              1公斤n码
              <u--input
                placeholder=""
                border="surround"
                class="inp-box m-l-10"
                customStyle="padding:0"
                v-model="label.kgYard"
              >
              </u--input>
            </view>
            <view class="flex flex-aic w-45p f-26">
              1码n公斤
              <u--input
                placeholder=""
                border="surround"
                class="inp-box m-l-10"
                customStyle="padding:0"
              >
              </u--input>
            </view>
          </view>
          <view class="flex flex-aic flex-sb m-t-20">
            <view class="flex flex-aic w-45p f-26">
              1公斤n罗
              <u--input
                placeholder=""
                border="surround"
                class="inp-box m-l-10"
                customStyle="padding:0"
              >
              </u--input>
            </view>
            <view class="flex flex-aic w-45p f-26">
              1罗n公斤
              <u--input
                placeholder=""
                border="surround"
                class="inp-box m-l-10"
                customStyle="padding:0"
              >
              </u--input>
            </view>
          </view>
        </view>
        <view class="bot-view flex flex-sa">
          <view class="btn" @click="close"> 取消 </view>
          <view class="btn" @click="addData"> 保存 </view>
        </view>
      </view>
    </u-popup>
    <u-picker
      @cancel="lengthShow = false"
      keyName="label"
      :show="lengthShow"
      :columns="lengthColumns"
      @confirm="lengthChange"
    ></u-picker>

    <u-picker
      @cancel="weightShow = false"
      keyName="label"
      :show="weightShow"
      :columns="weightColumns"
      @confirm="weightConfirm"
    ></u-picker>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  getGoodsWidthUnitListOptionsData,
  getGoodsGramWeightUnitOptionsData,
} from "@/apis/bill/information/product";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      btnList: [
        {
          id: "2",
          name: "删除",
          width: "100rpx",
          bgColor: "#ed656d",
          color: "#FFFFFF",
          fontSize: "28rpx",
        },
      ],
      showCancelButton: true,
      title: "幅宽克重",
      expenseTypeShow: false,
      label: {
        widthValue: "",
        widthUnitId: "4",
        widthUnitName: "cm",
        gramWeightValue: "",
        gramWeightUnitId: "3",
        gramWeightUnitName: "g",
        kgMeter: null,
        kgYard: null,
        meterKg: null,
        isDefault: false,
        isEnable: true,
      },
      indexList: [],
      config: {
        title: "幅宽克重",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      lengthShow: false,
      lengthIndex: 0,
      lengthColumns: [],

      weightShow: false,
      weightColumns: [],
      weightIndex: 0,
      // 判断当前是编辑还是新增
      dataUpdate:null
    };
  },
  computed: {},
  onLoad() {
    this.indexList = this.$getPageParams("product-information-detail").item;
    this.getGoodsWidthUnitListOptionsDatas();
    this.getGoodsGramWeightUnitOptionsDatas();
  },
  methods: {
    lengthChange(e) {
      if (this.lengthIndex == 0) {
        this.label.widthUnitName = e.value[0].label;
        this.label.widthUnitId = e.value[0].value;
      } else {
        this.label.gramWeightUnitName = e.value[0].label;
        this.label.gramWeightUnitId = e.value[0].value;
      }

      this.lengthShow = !this.lengthShow;
    },
    liuClickItem(item) {
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset();
        // this.label.name = this.indexList[item.index].label;
        // this.label.index = item.index;
        // this.show = true;
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset();
        this.indexList.splice(item.index, 1);
      }
    },
    editData(item,index) {
      this.dataUpdate = index
      this.label = item
      this.expenseTypeShow = true
    },
    close() {
      this.label = {
        widthValue: "",
        widthUnitId: "4",
        widthUnitName: "cm",
        gramWeightValue: "",
        gramWeightUnitId: "3",
        gramWeightUnitName: "g",
        kgMeter: null,
        kgYard: null,
        meterKg: null,
        isDefault: false,
        isEnable: false,
      };
      this.dataUpdate = null;
      this.expenseTypeShow = false;
    },
    addData() {
      if(this.dataUpdate != null){
        const label = JSON.parse(JSON.stringify(this.label))
        if(this.label.isDefault){
          this.indexList.map((it)=> it.isDefault = false)
        }
        this.indexList[this.dataUpdate] = label
      }else{
        if(this.label.isDefault){
          this.indexList.map((it)=> it.isDefault = false)
        }
        this.indexList.push(this.label)
      }
      this.close();
    },

    scrolltolower() {},
    searchChange() {
      this.indexList = [];
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.expenseTypeShow = true;
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
    // cm  mm  单位
    getGoodsWidthUnitListOptionsDatas() {
      getGoodsWidthUnitListOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.lengthColumns.push(data);
      });
    },
    // g  gg  单位
    getGoodsGramWeightUnitOptionsDatas() {
      getGoodsGramWeightUnitOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.weightColumns.push(data);
      });
    },
  },
  beforeDestroy() {
    const filteredList = this.indexList.filter((item) => item.isDefault);
    if (filteredList.length === 0) {
      this.indexList.push({
        widthValue: "",
        widthUnitId: "",
        widthUnitName: "",
        gramWeightValue: "",
        gramWeightUnitId: "",
        gramWeightUnitName: "",
        kgMeter: null,
        kgYard: null,
        meterKg: null,
        isDefault: true,
        isEnable: true,
      });
    }
    uni.$emit("on-pdcl-arr", {
      type: 5,
      data: this.indexList,
    });
    uni.$off("on-color-data");
    uni.$off("on-converter-data");
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
.bor-ra {
  padding: 1px 10px;
  border-radius: 2px;
  margin-left: 10px;
}
</style>
